<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <el-container>
      <el-header>
        <el-row>
          <el-input
            clearable
            class="input-box"
            v-model="question"
            @keyup.enter.native="send_question(200)"
            placeholder="请输入内容"
          ></el-input>
          <el-button
            type="success"
            plain
            :disabled="ban_click"
            @click="send_question(200)"
            >发送</el-button
          >
        </el-row>
      </el-header>
      <el-main>
        <el-dialog
          title="维度确认"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose"
        >
          <div
            :style="{
              'overflow-y': 'scroll',
              height:
                value.length < 3 ? (value.length + 1) * 50 + 'px' : '200px'
            }"
          >
            <div style="text-align: left;margin-bottom: 5px;font-weight: bold;">
              对于查询“{{question}}”，共有{{ candidate_dims.length }}个维度需要确定：
            </div>
            <div
              v-for="(dim, idx) in candidate_dims"
              :key="idx"
              style="text-align: left;margin-bottom: 10px;"
            >
              <div style="margin-bottom: 5px;">
                {{ idx + 1 }}. 对于查询中的[{{ dim.ambiguity_dim }}]，您指的是：
              </div>
              <el-select v-model="value[idx]" placeholder="请选择">
                <el-option
                  v-for="(item, index) in dim.candidates"
                  :key="index"
                  :label="item"
                  :value="index"
                >
                </el-option>
              </el-select>
            </div>
          </div>

          <span slot="footer" class="dialog-footer">
            <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
            <el-button type="primary" @click="send_clarifyDims"
              >确 定</el-button
            >
          </span>
        </el-dialog>
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :total="sqls.length * 10"
        >
        </el-pagination>
        <el-table
          :data="sqls[cur_val]"
          border
          style="width: 80%; margin: auto;"
        >
          <el-table-column prop="key" label="字段" width="200" fixed="left">
          </el-table-column>
          <el-table-column prop="content" label="内容"> </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "意图识别模块测试接口",
      question: "",
      ban_click: false,
      is_clearable: false,
      sqls: [], //[[{key:'question',content:'xxxx'},{},{}]]
      cur_val: 0,
      candidate_dims: [],
      dialogVisible: false,
      value: []
    };
  },
  methods: {
    send_question(code = 200) {
      // 按钮禁用，避免重复点击
      this.ban_click = true;
      let that = this;
      setTimeout(function() {
        that.ban_click = false;
      }, 1500);
      this.question = this.question.trim();
      if (this.question.length == 0) {
        // 输入为空或全是空格，则弹出警报
        this.$message({
          message: "输入不能为空哦",
          type: "warning"
        });
      } else {
        let input = {};
        if (code == 200) {
          input = {
            question: this.question
          };
        } else if (code == 300) {
          let dims = {};
          for (var i = 0; i < this.candidate_dims.length; i++) {
            var key = this.candidate_dims[i].ambiguity_dim
            var value = this.candidate_dims[i].candidates[this.value[i]]
            dims[key] = value;
          }
          input = {
            question: this.question,
            dimensions: dims
          };
          console.log(input);
        }

        // 加载
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
        // 发起网络请求

        this.$axios
          .post(
            "/getSQLs",
            {
              status: code,
              data: input
            },
            {
              timeout: 10000 // 超时10s则报错
            }
          )
          .then(response => {
            // 数据格式转换
            console.log(response.data);
            let status = response.data.status;
            if (status == 200) {
              this.sqls = response.data.data;
              loading.close();
            } else if (status == 300) {
              // 说明需要用户进行维度的选择
              this.candidate_dims = response.data.data;
              this.value = new Array(this.candidate_dims.length).fill(0);
              this.dialogVisible = true;
              loading.close();
            }
          })
          .catch(response => {
            console.log(response);
            this.sqls = [];
            this.$notify.error({
              title: "错误",
              message: String(response)
            });
            loading.close();
          });
      }
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          console.log(this.value);
          done();
        })
        .catch(_ => {});
    },
    send_clarifyDims() {
      this.dialogVisible = false;
      this.send_question(300);
    },
    openFullScreen2() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      setTimeout(() => {
        loading.close();
      }, 2000);
    },
    handleCurrentChange(val) {
      this.cur_val = val - 1;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
/* li {
  width: 200px;
  margin: 0 10px;
} */
a {
  color: #42b983;
}

.input-box {
  width: 500px;
}
</style>
